<script setup lang="ts">
import Button from "@/components/Button.vue";
import router from "@/router";
const task = () => {
  longFun();
};

//优化方案一：使用webWorker处理耗时任务
const taskWorker = () => {
  useWorker();
};
const test = () => {
  const obj = {
    name: "123",
    key: "asssdd",
  };
  router.push(`/newPage/123456/6542?params=${JSON.stringify(obj)}`);
};
function useWorker() {
  const worker = new Worker(new URL("./worker.js", import.meta.url));
  worker.postMessage("开启线程");
  worker.onmessage = function (e) {
    console.log(e.data);
  };
}
function longFun() {
  console.log("长任务开始执行");
  let i = 0;
  const start = performance.now();
  // 5秒内不停执行 i++ 操作，实现长任务效果
  while (performance.now() - start <= 5000) {
    i++;
  }
  console.log("长任务开始完成");

  return i;
}
</script>

<template>
  <div class="ball"></div>

  <div class="mt-50px">
    <Button @click="task">执行任务</Button>
    <Button @click="taskWorker">执行任务(worker)</Button>
    <Button @click="test" type="success">點擊</Button>
  </div>
</template>

<style lang="scss" scoped>
.ball {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: red;
  animation: move1 1s linear infinite;
  position: absolute;
}
@keyframes move1 {
  0% {
    left: 0;
  }
  50% {
    left: 300px;
  }
  100% {
    left: 0;
  }
}

//优化方案二：使用transform，不触发回流
@keyframes move2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(300px);
  }
  100% {
    transform: translateX(0px);
  }
}
</style>
